<template>
  <el-card class="el-header">我的会员
  </el-card>
  <el-card class="vipWrapper">
    <div class="vipTop">
      <div class="image">
        <div class="avatar"></div>
        <div class="name_info">
          <div class="name">MakeShift</div>
          <div class="status">您还不是会员</div>
        </div>
      </div>
      <div style="margin-top: 19px">开通会员平均每年可省：￥9500</div>
      <div class="vipMain">
        <div class="priceSave">
          <div class="priceBox">
            <div class="priceBoxWrapper">
              <p>季度会员</p>
              <p>￥98/季</p>
              <p>合计￥98（青少年专属）</p>
            </div>
          </div>
          <div class="priceBox">
            <div class="priceBoxWrapper">
              <p>1年会员</p>
              <p>￥268/季</p>
              <p>合计￥268</p>
            </div>
          </div>
          <div class="priceBox">
            <div class="priceBoxWrapper">
              <p>季度会员</p>
              <p>￥196/年</p>
              <p>合计￥588（省￥216元）</p>
            </div>
          </div>
        </div>
        <div class="btn">
          <el-button class="payButton">
            <h1>立即以588元开通</h1>
          </el-button>
          <el-row class="changeCss">
            <span style="margin-left: 50px">开通即视为同意</span>
            <a href="https://www.dance365.com/vip-agreement">《会员服务协议》</a>
          </el-row>
        </div>
      </div>
    </div>
    <div class="vipBottom">
      <el-row><h3 style="margin-top: 10px">会员专属权益</h3></el-row>
      <el-row style="margin: 20px 0">
        <!-- 免费 -->
        <el-col :span="4">
          <el-popover placement="top" :width="200" trigger="click">
            <template #reference>
              <el-card style="margin: 20px 5px;font-size: 13px;height: 140px;width:140px">
                <el-row style="display: flex;align-items: center;justify-content: center;">
                  <img style="width:50%;align-content: center" src="@/assets/images/myFree.png" alt="免费">
                </el-row>
                <el-row>
                  <div style="text-align: center">
                    <p style="color: pink">713个会员专区</p>
                    <p>课程免费学习</p>
                  </div>
                </el-row>
              </el-card>
            </template>
            <el-card>
              <el-row style="display: flex;align-items: center;justify-content: center;">
                <img style="width: 50%" src="@/assets/images/myFree.png" alt="免费">
              </el-row>
              <el-row>
                <p>会员专区的<span style="color: pink">713</span>个课程，会员全都可以免费观看学习！课程总价若干万元，而且每月更新、持续增加。
                  也许学会某一课程，单独购买的单价就已远超会员费，绝对超值！</p>
              </el-row>
              <el-row>
                <el-button style="background-color: deeppink;">
                  <a href="https://www.dance365.com/discovery/vip_zone?filter=%255B%255D&showAllSign=0&selectOrder=integrated&zoneId="
                     style="color: white">立即前往会员专区</a>
                </el-button>
              </el-row>
            </el-card>
          </el-popover>
        </el-col>
        <!-- 立减 -->
        <el-col :span="4">
          <el-popover placement="top" :width="200" trigger="click">
            <template #reference>
              <el-card style="margin: 20px 5px;font-size: 13px;height: 140px;width:140px">
                <el-row style="display: flex;align-items: center;justify-content: center;">
                  <img style="width: 50%;align-content: center" src="@/assets/images/myReduce.png" alt="免费">
                </el-row>
                <el-row>
                  <div style="text-align: center;">
                    <p>非会员专区课程</p>
                    <p>会员立减优惠</p>
                  </div>
                </el-row>
              </el-card>
            </template>
            <el-card>
              <el-row style="display: flex;align-items: center;justify-content: center;">
                <img style="width: 50%" src="@/assets/images/myReduce.png" alt="立减">
              </el-row>
              <el-row>
                会员购买<b>非会员专区</b>标有会员“立减”金额的视频课、直播课、线下课等商品服务，可获会员专属立减优惠！
                会员优惠很省钱... 几十... 几千... 买的越多，省的越多！
              </el-row>
            </el-card>
          </el-popover>
        </el-col>
        <!-- 同屏对比 -->
        <el-col :span="4">
          <el-popover placement="top" :width="200" trigger="click">
            <template #reference>
              <el-card style="margin: 20px 5px;font-size: 13px;height: 140px;width:140px">
                <el-row style="display: flex;align-items: center;justify-content: center;">
                  <img style="width: 50%;align-content: center" src="@/assets/images/myQp.png" alt="免费">
                </el-row>
                <el-row style="display: inline;text-align: center">
                  <div>同屏对比</div>
                  <div>功能</div>
                </el-row>
              </el-card>
            </template>
            <el-card>
              <el-row style="display: flex;align-items: center;justify-content: center;">
                <img style="width: 50%" src="@/assets/images/myQp.png" alt="免费">
              </el-row>
              <el-row>
                <p>会员使用同屏对比功能，将自己跳的动作与原跳视频画面进行每一节拍、每一时刻的对比学习。</p>
                <p>同屏对比，精确又直观，让会员学习效果最大化！</p>
              </el-row>
            </el-card>
          </el-popover>
        </el-col>
        <!-- 音频提取 -->
        <el-col :span="4">
          <el-popover placement="top" :width="200" trigger="click">
            <template #reference>
              <el-card style="margin: 20px 5px;font-size: 13px;height: 140px;width:140px">
                <el-row style="display: flex;align-items: center;justify-content: center;">
                  <img style="width: 50%;align-content: center" src="@/assets/images/myMusic.png" alt="免费">
                </el-row>
                <el-row style="display: inline;text-align: center">
                  <div>音频提取</div>
                  <div>功能</div>
                </el-row>
              </el-card>
            </template>
            <el-card>
              <el-row style="display: flex;align-items: center;justify-content: center;">
                <img style="width: 50%" src="@/assets/images/myMusic.png" alt="免费">
              </el-row>
              <el-row>
                <p>会员可一键从任何视频中提取音频/音乐（视频课需已设置允许提取）、自动保存在音频库，并可分享导出或导入！！</p>
                <p>将手机相册里的视频添加到练习室，同样可以音频提取。</p>
              </el-row>
              <el-row>
                <el-button style="background-color: deeppink;">
                  <a href="https://www.dance365.com/detail/article?momentId=f7fa83ec6bfc4c95a456392a6ab42402"
                     style="color: white">查看使用说明文档</a>
                </el-button>
              </el-row>
            </el-card>
          </el-popover>
        </el-col>
        <!--音频剪辑-->
        <el-col :span="4">
          <el-popover placement="top" :width="200" trigger="click">
            <template #reference>
              <el-card style="margin: 20px 5px;font-size: 13px;height: 140px;width:140px">
                <el-row style="display: flex;align-items: center;justify-content: center;">
                  <img style="width: 50%;align-content: center" src="@/assets/images/myCatch.png" alt="免费">
                </el-row>
                <el-row style="display: inline;text-align: center">
                  <div>音频剪辑</div>
                  <div>功能</div>
                </el-row>
              </el-card>
            </template>
            <el-card>
              <el-row style="display: flex;align-items: center;justify-content: center;">
                <img style="width: 50%" src="@/assets/images/myCatch.png" alt="免费">
              </el-row>
              <el-row>
                <p>会员可对音频库的音频/音乐进行任意剪辑或合并，并可分享导出或导入！</p>
                <p>将外部音乐导入到音频库，同样可以音频剪辑哦。</p>
              </el-row>
              <el-row>
                <el-button style="background-color: deeppink;">
                  <a href="https://www.dance365.com/detail/article?momentId=f7fa83ec6bfc4c95a456392a6ab42402"
                     style="color: white">查看使用说明文档</a>
                </el-button>
              </el-row>
            </el-card>
          </el-popover>
        </el-col>
        <!-- 节拍口令 -->
        <el-col :span="4">
          <el-popover placement="top" :width="200" trigger="click">
            <template #reference>
              <el-card style="margin: 20px 5px;font-size: 13px;height: 140px;width:140px">
                <el-row style="display: flex;align-items: center;justify-content: center;">
                  <img style="width: 50%;align-content: center" src="@/assets/images/myJp.png" alt="免费">
                </el-row>
                <el-row style="display: inline;text-align: center">
                  <div>节拍口令</div>
                  <div>功能</div>
                </el-row>
              </el-card>
            </template>
            <el-card>
              <el-row style="display: flex;align-items: center;justify-content: center;">
                <img style="width: 50%" src="@/assets/images/myFree.png" alt="免费">
              </el-row>
              <el-row>
                <p>通过设置节拍口令，会员能把想学的任何作品视频自动变成口令教程，就像老师一样数节拍口令教学！</p>
                <p>节拍口令，让会员总能快人一步、抢先学新舞！</p>
              </el-row>
              <el-row>
                <el-button style="background-color: deeppink;">
                  <a href="https://www.dance365.com/detail/article?momentId=ae78b3eebb774ceeb06009f49e68e93f"
                     style="color: white">查看使用说明文档</a>
                </el-button>
              </el-row>
            </el-card>
          </el-popover>
        </el-col>
      </el-row>
      <el-row style="margin: 20px 0">
        <!-- 保存视频 -->
        <el-col :span="4">
          <el-popover placement="top" :width="200" trigger="click">
            <template #reference>
              <el-card style="margin: 20px 5px;font-size: 13px;height: 140px;width:140px">
                <el-row style="display: flex;align-items: center;justify-content: center;">
                  <img style="width:50%;align-content: center" src="@/assets/images/myDown.png" alt="免费">
                </el-row>
                <el-row style="display: inline;text-align: center">
                  <div style="text-align: center">
                    <p>保存视频到</p>
                    <p>手机本地相册</p>
                  </div>
                </el-row>
              </el-card>
            </template>
            <el-card>
              <el-row style="display: flex;align-items: center;justify-content: center;">
                <img style="width: 50%" src="@/assets/images/myDown.png" alt="免费">
              </el-row>
              <el-row>
                <p>将缓存的资源视频（不含视频课、直播课等课程的视频），保存到手机本地相册</p>
              </el-row>
            </el-card>
          </el-popover>
        </el-col>
        <!-- 免广告 -->
        <el-col :span="4">
          <el-popover placement="top" :width="200" trigger="click">
            <template #reference>
              <el-card style="margin: 20px 5px;font-size: 13px;height: 140px;width:140px">
                <el-row style="display: flex;align-items: center;justify-content: center;">
                  <img style="width: 50%;align-content: center" src="@/assets/images/myMgg.png" alt="免费">
                </el-row>
                <el-row>
                  <div style="text-align: center;">
                    <p>免广告特权</p>
                  </div>
                </el-row>
              </el-card>
            </template>
            <el-card>
              <el-row style="display: flex;align-items: center;justify-content: center;">
                <img style="width: 50%" src="@/assets/images/myMgg.png" alt="立减">
              </el-row>
              <el-row>
                会员有效期内，自动跳过视频播放页的广告。
              </el-row>
            </el-card>
          </el-popover>
        </el-col>
        <!-- 成长等级 -->
        <el-col :span="4">
          <el-popover placement="top" :width="200" trigger="click">
            <template #reference>
              <el-card style="margin: 20px 5px;font-size: 13px;height: 140px;width:140px">
                <el-row style="display: flex;align-items: center;justify-content: center;">
                  <img style="width: 50%;align-content: center" src="@/assets/images/myGrowth.png" alt="免费">
                </el-row>
                <el-row style="display: inline;text-align: center">
                  <div>成长等级</div>
                  <div>加速特权</div>
                </el-row>
              </el-card>
            </template>
            <el-card>
              <el-row style="display: flex;align-items: center;justify-content: center;">
                <img style="width: 50%" src="@/assets/images/myGrowth.png" alt="免费">
              </el-row>
              <el-row>
                <p>开通年费会员后，可获得相当于10倍会员费的成长值。会员有效期内可获得1.5倍成长值加速特权。</p>

              </el-row>
            </el-card>
          </el-popover>
        </el-col>
        <!-- 会员学习 -->
        <el-col :span="4">
          <el-popover placement="top" :width="200" trigger="click">
            <template #reference>
              <el-card style="margin: 20px 5px;font-size: 13px;height: 140px;width:140px">
                <el-row style="display: flex;align-items: center;justify-content: center;">
                  <img style="width: 50%;align-content: center" src="@/assets/images/myBook.png" alt="免费">
                </el-row>
                <el-row style="display: inline;text-align: center">
                  <div>会员学习</div>
                  <div>成长优先帮扶</div>
                </el-row>
              </el-card>
            </template>
            <el-card>
              <el-row style="display: flex;align-items: center;justify-content: center;">
                <img style="width: 50%" src="@/assets/images/myBook.png" alt="免费">
              </el-row>
              <el-row>
                <p>会员学习成长过程中的困惑、问题和所需资源，平台将优先更大力度提供帮助。</p>
              </el-row>
            </el-card>
          </el-popover>
        </el-col>
        <!--会员专享-->
        <el-col :span="4">
          <el-popover placement="top" :width="200" trigger="click">
            <template #reference>
              <el-card style="margin: 20px 5px;font-size: 13px;height: 140px;width:140px">
                <el-row style="display: flex;align-items: center;justify-content: center;">
                  <img style="width: 50%;align-content: center" src="@/assets/images/myTx.png" alt="免费">
                </el-row>
                <el-row style="display: inline;text-align: center">
                  <div>会员专享</div>
                  <div>身份标识</div>
                </el-row>
              </el-card>
            </template>
            <el-card>
              <el-row style="display: flex;align-items: center;justify-content: center;">
                <img style="width: 50%" src="@/assets/images/myTx.png" alt="免费">
              </el-row>
              <el-row>
                <p>所有用户都将会看到您的会员闪耀标识，彰显您的尊贵身份，让您更加出众耀眼！</p>
              </el-row>
            </el-card>
          </el-popover>
        </el-col>
        <!-- 享受新增 -->
        <el-col :span="4">
          <el-popover placement="top" :width="200" trigger="click">
            <template #reference>
              <el-card style="margin: 20px 5px;font-size: 13px;height: 140px;width:140px">
                <el-row style="display: flex;align-items: center;justify-content: center;">
                  <img style="width: 50%;align-content: center" src="@/assets/images/myXz.png" alt="免费">
                </el-row>
                <el-row style="display: inline;text-align: center">
                  <div>享受新增</div>
                  <div>权益和功能</div>
                </el-row>
              </el-card>
            </template>
            <el-card>
              <el-row style="display: flex;align-items: center;justify-content: center;">
                <img style="width: 50%" src="@/assets/images/myXz.png" alt="免费">
              </el-row>
              <el-row>
                <p>会员有效期内，您有权享受新增加的相应会员等级的会员权益和会员功能。</p>
              </el-row>
            </el-card>
          </el-popover>
        </el-col>
      </el-row>


    </div>
  </el-card>
</template>

<script setup lang="ts">
import {ref} from "vue";


</script>

<style lang="less" scoped>
.vipWrapper {
  margin-top: 10px;
}

.vipTop {
  padding-bottom: 37px;
  text-align: center;
  border-bottom: 1px solid #e3e3e3;

  .image {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    .avatar {
      cursor: pointer;
      display: inline-block;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #ccc url('@/assets/images/bg.jpg') 50% 50%;
      background-size: cover;
    }

    .name_info {
      margin-left: 21px;
      font-size: 20px;
      color: #000;

      .status {
        margin-top: 14px;
        font-size: 14px;
        color: #f93684;
        text-align: left;
      }
    }
  }

  .vipMain {
    .priceSave {
      width: 700px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      min-height: 124px;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin: 21px auto 0;

      .priceBox {
        margin-top: 30px;

        .priceBoxWrapper {
          user-select: none;
          justify-content: space-evenly;
          cursor: pointer;
          flex-direction: column;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          box-sizing: border-box;
          margin-right: 30px;
          width: 200px;
          height: 124px;
          border: 1px solid #b1b5c1;
          border-radius: 10px;
          text-align: center;
          position: relative;
        }

      }
    }

    .btn {
      width: 330px;
      display: block;
      margin: 0 auto;
      position: relative;

      .payButton {
        width: 330px;
        height: 56px;
        font-size: 16px;
        margin: 30px auto 12px;
        border-radius: 10px;
        background: linear-gradient(-56deg, #ff4683, #ff638f);
        color: #fff;
        cursor: pointer;
      }

      .el-row {
        font-size: 14px;

        a {
          color: #f93684;
          text-decoration: none;
        }
      }
    }
  }
}

.vipBottom {
  border-bottom: 1px solid #e3e3e3;
}

</style>
